<template>
    <div class="container">
        <el-container style="height: 100%; width: 100%;">
            <el-header class="container-header-part">
                <div></div>
            </el-header>
            <el-container style="height: 100%;">
                <el-aside width="200px" class="container-aside-part">
                    <el-menu
                        default-active="1"
                        @select="handleSelect">
                        <el-menu-item index="1">Order list</el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main style="width: 100%; height: 100%; padding: 20px;">
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';


const router = useRouter()

const handleSelect = (key: string, keyPath: string[]) => {
    console.log('handleOpen', key, keyPath);
    if (key === '1') {
        router.push('/console/orderlist')
    }
}


</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    color: black;
    background-color: #eeeeee;
}

.container-header-part {
    width: 100%;
    background-color: cornflowerblue;
}

.container-aside-part {
    height: 100%;
    background-color: #999999;
}
</style>